<template>
  <!-- 资金计划折线图 -->
  <div class="fundPlanChartPage">
    <div class="moneyBox m-b5">
      <div class="money-item" v-for="(n, i) in showMoneyArr" :key="i">
        <div class="item-title">{{ n.title }}：</div>
        <div class="item-cn">
          <digital-flop
            :config="n.moneyConfig"
            style="width: 90px; height: 25px; padding-top: 4px" />
        </div>
      </div>
    </div>
    <div class="chartBox" id="fundPlanChart"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { DigitalFlop } from "@kjgl77/datav-vue3";
import { changeNumToWan } from "../../utils/handelScreen";
import { fundPlanApi } from "@/api-dashboard/leaderApi";
import echarts from "@/common/utils/echarts.js";

const fundMoneyBaseConfig = reactive({
  content: "{nt}万元",
  textAlign: "left",
  toFixed: 2,
  animationFrame: 100,
  style: {
    fontSize: 14,
    fill: "#00C6FF",
  },
});
const showMoneyArr = ref([
  {
    title: "应收",
    moneyConfig: {
      number: [0],
      ...fundMoneyBaseConfig,
    },
  },
  {
    title: "应付",
    moneyConfig: {
      number: [0],
      ...fundMoneyBaseConfig,
    },
  },
  {
    title: "余额",
    moneyConfig: {
      number: [0],
      ...fundMoneyBaseConfig,
    },
  },
]);
let paramData = ref(null);

// 图表数据
const fundPlanChartRef = ref(null);
const options = reactive({
  color: ["#80FFA5"],
  title: {
    text: "",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  legend: {
    top: "20",
    selectedMode: false,
    data: ["账户余额"],
    textStyle: {
      color: "#D3E3FF",
      fontWeight: "500",
      fontFamily: "SourceHanSansMedium",
    },
    itemStyle: {
      opacity: 0,
    },
    itemWidth: 60,
    lineStyle: {
      type: "solid",
      color: "#1978E5",
    },
  },
  grid: {
    left: "3%",
    right: "3%",
    bottom: "7%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      name: "单位(月)",
      nameTextStyle: {
        color: "#D3E3FF",
        fontWeight: "500",
        align: "right",
        verticalAlign: "bottom",
        lineHeight: -60,
      },
      boundaryGap: false,
      triggerEvent: true,
      data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
      axisLabel: {
        color: "#D3E3FF",
      },
      axisTick: {
        // 去掉X轴刻度
        show: false,
      },
      axisLine: {
        // 不显示X轴线
        show: false,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "单位(万元)",
      nameTextStyle: {
        color: "#D3E3FF",
        fontWeight: "500",
        align: "right",
        padding: [0, -2, 0, 0]
      },
      // 横向分割线配置
      splitLine: {
        lineStyle: {
          type: [5, 10], // 虚线
          color: ["#B0D7FF"],
          opacity: 0.3,
        },
      },
      axisLabel: {
        color: "#D3E3FF",
      },
    },
  ],
  series: [
    {
      name: "账户余额",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        // 设置线条颜色
        width: 3,
        color: "#1978E5",
      },
      itemStyle: {
        // 设置线条上点的颜色
        color: "#00D3FD",
      },
      showSymbol: false,
      areaStyle: {
        origin: "start",
        opacity: 0.8,
        shadowColor: "rgba(0, 0, 0, 0.5)",
        shadowBlur: 10,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            // 渐变颜色
            {
              offset: 0,
              color: "rgb(18, 209, 242)",
            },
            {
              offset: 0.1,
              color: "rgb(17, 211, 243)",
            },
            {
              offset: 0.2,
              color: "rgb(16, 210, 243)",
            },
            {
              offset: 0.3,
              color: "rgb(15, 203, 236)",
            },
            {
              offset: 0.4,
              color: "rgb(13, 109, 156)",
            },
            {
              offset: 0.5,
              color: "rgb(15, 119, 163)",
            },
            {
              offset: 1,
              color: "#000",
            },
          ],
          global: false,
        },
      },
      emphasis: {
        focus: "series",
      },
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    },
  ],
});

// 图表头部数据
const initMoneyData = (postVal) => {
  let paramObj = {
    year: postVal,
  };
  fundPlanApi.zjjh(paramObj).then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let dataObj = data.records[0];
      showMoneyArr.value[0].moneyConfig.number[0] = dataObj.amount_receivable
        ? dataObj.amount_receivable / 10000
        : 0;
      showMoneyArr.value[1].moneyConfig.number[0] = dataObj.payable_amount
        ? dataObj.payable_amount / 10000
        : 0;
      showMoneyArr.value[2].moneyConfig.number[0] = dataObj.balance
        ? dataObj.balance / 10000
        : 0;
    }
  });
};

// 资金缺口金额
const chartMoneyDataArr = ref([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
// 资金缺口图表数据
const initChartData = (postVal) => {
  let paramObj = {
    year: postVal,
  };
  fundPlanApi.zjqk(paramObj).then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let dataArr = data.records;
      dataArr.map((n, i) => {
        let index = n.month - 1;
        chartMoneyDataArr.value[index] = changeNumToWan(n.funding_gap);
      });
      // 必须通过此方式向图表导入数据，否则不生效
      options.series[0].data = chartMoneyDataArr.value;
      fundPlanChartRef.value.setOption(options);
    }
  });
};

const initChartOption = () => {
  initMoneyData(paramData.value);
  initChartData(paramData.value);
};
// 在父组件中调用
const initFundPlanChart = (getParam) => {
  paramData.value = getParam;
  // 基于准备好的dom，初始化echarts实例
  fundPlanChartRef.value = echarts.init(
    document.getElementById("fundPlanChart")
  );
  initChartOption();
  return fundPlanChartRef.value
};

defineExpose({
  initFundPlanChart,
});
</script>

<style lang="scss" scoped>
.fundPlanChartPage {
  width: 100%;
  height: 100%;
  .moneyBox {
    display: flex;
    justify-content: space-around;
    font-weight: bold;
    .money-item {
      width: 155px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      background: rgba(216, 240, 255, 0.1);

      display: flex;
      justify-content: center;
      .item-title {
        color: #d8f0ff;
      }
      .item-cn {
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
        // background-image: -webkit-linear-gradient(bottom, #7adaff, #d8f0ff);
      }
    }
  }
  .chartBox {
    width: 100%;
    height: calc(100% - 25px);
  }
}
</style>
